<template>
  <!-- 资产退还 -->
  <div class="repairs-form">

    <!-- 轮播图组件 -->
    <Carousel :assetInfoList="assetInfoList" />

    <!-- 数据 start -->
    <div class="repairs-box">
      <p class="b-title">退还数据</p>
      <van-form>
        <!-- <van-field
          v-model="department"
          label="所属部门:"
          disabled
          placeholder="读取资产所在部门"
        /> -->
        <van-field
          v-model="user"
          label="退还人员:"
          disabled
          placeholder="读取当前员工"
        />
        <van-field
          v-model="time"
          label="退还时间:"
          disabled
          placeholder="默认当前时间"
        />
        <div class="pt-10"></div>
        <van-field
          v-model="form.ret_reason"
          type="textarea"
          placeholder="请输入退还备注"
          rows="5"
          autosize
          required
          label="退还备注"
        />
        <div class="pt-10"></div>
        <!-- 上传图片 -->
        <van-field
          label="上传图片"
          colon
          required
          class="bt-10"
        >
          <template #input>
            <div class="flex-box">
              <div>
                <van-uploader
                  :max-count="6"
                  v-model="form.ret_ri_url"
                />
              </div>
              <div class="tips">只支持上传6张图片</div>
            </div>
          </template>
        </van-field>
        <div style="padding: 16px 16px 40px;background-color: #f8f9fd;">
          <van-button block type="info" native-type="submit" @click="handleCreateReturn">
            提交退还
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- 数据 end -->

  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import Carousel from '@/components/Carousel';
import uploadMixins from '@/mixins/upload';
import { COMMON_TYPES } from '@/constant';

export default {
  name: 'repairs-form',
  mixins: [uploadMixins],
  components: {
    Carousel
  },
  props: ['$type'],
  data () {
    return {
      COMMON_TYPES,
      assetInfoList: {}, // 资产信息
      department: this.$store.getters.departmentList[0].department_name, // 默认部门
      user: this.$store.getters.name, // 默认人员
      time: this.$dayjs().format('YYYY-MM-DD'), // 默认时间
      form: {
        re_id: '', // 记录ID
        rp_a_id: '', // 资产ID
        ret_reason: '', // 退还原因
        ret_ri_url: [] // 退还图片
      }
    };
  },
  methods: {
    // 获取资产信息详情,回显轮播图组件
    getAssetInfo () {
      let params = {
        id: this.$route.query.f_id
      };
      this.$api.getAssetInfo(params).then(res => {
        if (res.code === 0) {
          this.assetInfoList = res.result;
        }
      });
    },
    // 图片上传
    async handleUploadPicture (file) {
      // const url = await this.handleUploadToOSS(file);
    },
    // 图片预览
    handleImagePreview (images) {
      const imgArr = [images];
      ImagePreview(imgArr);
    },
    // 创建退还
    handleCreateReturn () {
      if (!this.form.ret_reason) {
        this.$toast.fail('请输入退还备注');
        return;
      }
      if (!this.form.ret_ri_url.length) {
        this.$toast.fail('请上传图片');
        return;
      }
      this.handleUploadFiles(this.form.ret_ri_url).then(urls => {
        const params = {
          ret_a_id: this.$route.query.f_id,
          re_id: this.$route.query.id,
          ret_reason: this.form.ret_reason,
          ret_ri_url: JSON.stringify(urls)
        };

        this.$api.postReturnAddReturn(params).then(res => {
          if (res.code === 0) {
            this.$toast.success('提交退还成功');
            if (this.$type === COMMON_TYPES.MY && this.$route.query.c_from === '首页') {
              this.$router.replace({
                name: 'home',
                query: {
                  title: '首页',
                  type: COMMON_TYPES.MY
                }
              });
            } else if (this.$type === COMMON_TYPES.DEPARTMENT) {
              this.$router.replace({
                name: 'my-collecting',
                query: {
                  title: '部门领用资产',
                  type: COMMON_TYPES.DEPARTMENT,
                  dept_id: this.$route.query.dept_id
                }
              });
            } else if (this.$type === COMMON_TYPES.MY) {
              this.$router.replace({
                name: 'my-collecting',
                query: {
                  title: '我领用的资产',
                  type: COMMON_TYPES.MY
                }
              });
            }
          }
        });
      });
    }
  },
  created () {
    this.getAssetInfo(); // 获取资产信息详情, 回显轮播图组件;
  }
};
</script>

<style lang="scss" scoped>
.repairs-form {
  // 退还数据
  .repairs-box {
    .b-title {
      color:#1B1B1C;
      font-size: 16px;
      padding: 12px 20px 12px 15px;
      background-color: #f8f9fd;
    }
    ::v-deep.van-field__label {
      width: 78px;
    }
    .pt-10 {
      height: 10px;
      background-color: #f8f9fd;
    }
    .tips {
      font-size: 12px;
      color: #C1C1C1;
    }
  }
  ::v-deep.van-field__control--custom {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
